<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>云音乐</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/iview/3.0.0/styles/iview.css">
		<link rel="stylesheet" href="css/index.css" />
	</head>

	<body>
		<div id="app">
			<Row>
				<i-col span="12" offset="6">
					<div class="y_secion">
						<i-button type="primary" @click="ysou" class="y_btn">确定</i-button>
						<i-input v-model="value" placeholder="请输入关键字" class="y_key" />
					</div>
				</i-col>
			</Row>
			<Row>
				<i-col span="12" offset="6">
					<div class="y_neirong">
						<div class="y_xinxi" v-for="item in yinyue">
							<img :src="item.al.picUrl" />
							<span class="y_span">{{item.name}}</span>
							<span class="y_span" v-text="item.ar[0].name"></span>
							<i-button @click="toggle(item)" v-if="item.id" type="primary" class="y_xiazai">下载</i-button>
						</div>
					</div>
				</i-col>
			</Row>
		</div>
	</body>
	
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/iview/3.0.0/iview.js"></script>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				value: "",
				yinyue: {}
			},
			methods: {
				ysou: function() {
					var self = this;
					$.ajax({
						type: "get",
						url: "https://api.imjad.cn/cloudmusic/",
						dataType: 'json',
						data: {
							"type": "search",
							"s": self.value,
							"limit": "30"
						},
						success: function(res) {
							self.yinyue = res.result.songs;
						}
					});
				},
				toggle: function(item) {
					var self = this;
					self.arrr = item.id;
					$.ajax({
						type: "get",
						url: "https://api.imjad.cn/cloudmusic/?type=song&id=" + self.arrr + "&br=128000",
						dataType: 'json',
						success: function(res) {
							self.dizhi = res.data[0].url;
							window.open(self.dizhi);
						}
					});
				}
			}
		})
	</script>

</html>